<template>
    <div class="title">
        二级菜单管理
    </div>
    <div style="color: #eee;">
        <el-card shadow="hover" style="text-align: center;font-size: 15px; ">二级菜单管理</el-card>
    </div>
    <el-table :data="formData.tableData" style="width: 100%" border stripe>
        <el-table-column type="index" width="100" label="序号" fixed />
        <el-table-column label="名称">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.title }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="名称英文">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="路由">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.url }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="组件">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.component }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="图标">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.icon }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="排序">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.order }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="角色">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.roles }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="一级菜单">
            <template #default="scope">
                <el-popover effect="light" trigger="hover" placement="top" width="auto">
                    <template #reference>
                        <el-tag>{{ scope.row.menu }}-{{ scope.row.menutitle }}</el-tag>
                    </template>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="success" :icon="Plus" circle @click="handleAdd()"></el-button>
                <el-button type="primary" :icon="Edit" circle @click="handleEdit(scope.$index, scope.row)"></el-button>
                <el-button type="danger" :icon="Delete" circle
                    @click="handleDelete(scope.$index, scope.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[50, 100, 150, 200]"
        :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> -->
    <el-pagination background layout="prev, pager, next" :total="1000" class="pageina" />
    <!-- 对话框 -->
    <el-dialog v-model="dialogFormVisible" :title="dialogtitle" width="500" draggable>
        <div>
            <span>名称:显示在侧面的名称</span><span>名称英文:路由的名称</span><span>路由:绝对路由</span><span>组件:组件的绝对路径(不包含components,不用写.vue)</span>
        </div>
        <el-form :model="formData.dialogData">
            <el-form-item label="二级菜单ID" :label-width="formLabelWidth">
                <el-input v-model="formData.dialogData.id" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="formData.dialogData.title" />
            </el-form-item>
            <el-form-item label="名称英文" :label-width="formLabelWidth">
                <el-input v-model="formData.dialogData.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="路由" :label-width="formLabelWidth">
                <el-input v-model="formData.dialogData.url" autocomplete="off" />
            </el-form-item>
            <el-form-item label="组件" :label-width="formLabelWidth">
                <el-input v-model="formData.dialogData.component" autocomplete="off" />
            </el-form-item>
            <el-form-item label="图标" :label-width="formLabelWidth">
                <el-input v-model="formData.dialogData.icon" autocomplete="off" />
            </el-form-item>
            <el-form-item label="排序" :label-width="formLabelWidth">
                <el-input v-model="formData.dialogData.order" autocomplete="off" />
            </el-form-item>
            <el-form-item label="角色" :label-width="formLabelWidth">
                <el-input v-model="formData.dialogData.roles" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="一级菜单" :label-width="formLabelWidth">
                <el-cascader v-model="value" :options="formData.options" @change="oneMenuChange" clearable />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addMenus" v-show="showaddedit">
                    增加
                </el-button>
                <el-button type="primary" @click="editMenus" v-show="!showaddedit">
                    修改
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
    Plus,
    Delete,
    Edit
} from '@element-plus/icons-vue'
// import RoleManame from '@/utils/role/role';
// import roleAPI from '@/utils/role/role'+
import twomenusAPI from '@/utils/twomenus/twomenus'
import menuAPI from '@/utils/onemenus/onemenus'
// 数据
// 全局数据
const formData = reactive({
    'tableData': [
        {
            title: '',
            name: '',
            url: '',
            component: '',
            icon: '',
            order: '',
            roles: '',
            menu: '',
            menutitle: ''
        }
    ],
    'dialogData': {
        id: '',
        title: '',
        name: '',
        url: '',
        component: '',
        icon: '',
        order: '',
        roles: '',
        menu: '',
        menutitle: ''
    },
    'options': []

})
// dialog数据
const dialogtitle = ref('')
const showaddedit = ref(true)
const dialogTem =
{
    id: '',
    title: '',
    name: '',
    url: '',
    component: '',
    icon: '',
    order: '',
    roles: '1',
    menu: '',
    menutitle: ''
}
const dialogItem =
{
    id: '',
    title: '',
    name: '',
    url: '',
    component: '',
    icon: '',
    order: '',
    roles: '1',
    menu: '',
    menutitle: ''
}
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const value = ref([])
// 请求数据
const url = 'per-manage/permissions'
// 分页数据
const currentPage4 = ref(4)
const pageSize4 = ref(200)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)


// 函数处理
// 请求数据
const roles = async () => {
    const res = await twomenusAPI.get_twomenus(url + '/')
    const one_menus = await menuAPI.get_onemenus('per-manage/menus/')
    res.map((tem: any) => {
        one_menus.forEach((item: any) => {
            if (tem.menu == item.id) {
                tem.menutitle = item.title
            }
        })
    })
    formData.tableData = res
}
roles()

// 表格操作方法
const handleEdit = (index: number, row: any) => {
    formData.dialogData = row
    value.value = row.menu
    if (!formData.options.length) {
        getonemenus()
    }
    dialogtitle.value = '修改角色'
    dialogFormVisible.value = true
    showaddedit.value = false
}
const handleDelete = async (index: number, row: any) => {
    dialogtitle.value = '删除角色'
    await twomenusAPI.delete_twomenu(url, row.id,)
    roles()
    ElMessage({
        message: '你删除的' + row.name + '成功！',
        type: 'success',
    })
}

const handleAdd = async () => {
    formData.dialogData = dialogTem
    if (!formData.options.length) {
        getonemenus()
    }
    dialogtitle.value = '添加角色'
    dialogFormVisible.value = true
    showaddedit.value = true
}

const addMenus = async () => {
    await twomenusAPI.add_twomenus(url + '/', formData.dialogData)
    roles()
    ElMessage({
        message: '你添加的' + formData.dialogData.name + '成功！',
        type: 'success',
    })
    formData.dialogData = dialogItem
    dialogFormVisible.value = false
}

const editMenus = async () => {
    await twomenusAPI.edit_twomenu(url, formData.dialogData)
    roles()
    ElMessage({
        message: '你修改的' + formData.dialogData.name + '成功！',
        type: 'success',
    })
    formData.dialogData = dialogItem
    dialogFormVisible.value = false
}
const getonemenus = async () => {
    const res = await menuAPI.get_onemenus('per-manage/menus/')
    res.forEach((tem: any) => {
        formData.options.push({
            value: tem.id,
            label: tem.title
        })
    });
}
// dialog函数方法
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
const oneMenuChange = async () => {
    formData.dialogData.menu = value.value[0]
}
</script>

<style scoped>
.title {
    color: #303133;
    text-align: center;
    font-size: 30px;
    background: #fff;
    margin-bottom: 15px;
}

.pageina {
    margin-top: 15px;
    justify-content: center;
}

span {
    margin: 10px;
}
</style>